<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js" charset="UTF-8"></script>
</head>
<body>
	<form class="layui-form">
		<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">信息</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" class="layui-textarea" name="xinxi"></textarea>
			</div>
		</div>


<div class="layui-form-item">
			<label class="layui-form-label">分类</label>
			<div class="layui-input-block">
				<select name="fenlei" lay-filter="aihao">
					<option value="1">宇通介绍</option>
					<option value="2">宇通品牌</option>
					<option value="3">宇通荣耀</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="button" class="layui-btn" id="test">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
				<img id="tupian" />
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
	</form>
	<script>
		layui.use('upload', function() {
			var upload = layui.upload;

			//执行实例
			var uploadInst = upload.render({
				elem : '#test' //绑定元素
				,
				url : 'upload' //上传接口
				,
				done : function(res) {
					//上传完毕回调
					$("#tupian").attr("src", res.data).css("width", "200px")
							.css("hight", "150px");
				},
				error : function() {
					//请求异常回调
				}
			});
		});

		//        表单
		layui.use('form', function() {
			var form = layui.form;

			//各种基于事件的操作，下面会有进一步介绍
			//-----------------------------------------
			//           监听submit
			form.on('submit(*)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				data.field.img = $("#tupian").attr("src");
				$.ajax({
					url : "TianjiaGuanyv",
					type : "get",
					data : data.field,
					success : function(res) {
						if (res == 1) {
							layer.confirm('添加成功！');
							window.location.reload();
						} else {
							layer.confirm('添加失败！');
						}
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index); 
						 window.parent.location.reload();
					}

				});

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		});
	</script>
</body>
</html>